<template>
  <div class="findpwd">
    <group>
      <x-input title="手机号：" placeholder="请输入手机号" type="tel" v-model="phone">
      </x-input>
      <x-input title="验证码：" placeholder="验证码" type="number" v-model="code">
        <img ref="code" slot="right-full-height" src="/index.php/api/user/verify?type=forget" alt="验证码" @click="codeClick($event)">
      </x-input>
    </group>
    <agent-button @btnClick="nextClick" class="next" :disabled="!phone.length > 0 || !code.length > 0">下一步</agent-button>
  </div>
</template>

<script>
import { Group, XInput } from "vux";
import AgentButton from "../../components/common/AgentButton.vue";
export default {
  data() {
    return {
      phone: "",
      code: ""
    };
  },
  components: {
    Group,
    XInput,
    AgentButton
  },
  methods: {
    nextClick() {
      this.apiService.user
        .forgetpwd({
          username: this.phone,
          verifycode: this.code
        })
        .then(res => {
          this.$router.push({
            path: "/shortMessageCode",
            query: {
              phone: this.phone
            }
          });
        })
        .catch(code => {
          this.$refs.code.src = `/index.php/api/user/verify?type=forget&r=${Math.random()}`;
        });
    },
    codeClick(event) {
      event.target.src = `/index.php/api/user/verify?type=forget&r=${Math.random()}`;
    }
  }
};
</script>
<style scoped>
.findpwd::before {
  content: "";
  display: table;
}
.findpwd {
  height: 100%;
  background-color: #fff;
  text-align: center;
}
.next {
  margin: 0.5rem auto;
  width: 90%;
}
</style>


